<template>
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="多媒体类型" prop="MEDIATYPE">
              <el-select v-model="form.MEDIATYPE" disabled filterable clearable placeholder="请选择多媒体类型" @change="changeMedia">
                <el-option v-for="item in mediaOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="受理渠道" prop="BUSICHANNEL">
              <el-select v-model="form.BUSICHANNEL" filterable clearable placeholder="请选择受理渠道" @change="changeChannel" :disabled="form.MEDIATYPE==''">
                <el-option v-for="item in channelOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                  :value="item.FIELDKEY">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="业务类型" prop="BUSITYPE">
              <el-select v-model="form.BUSITYPE" filterable clearable placeholder="请选择业务类型" :disabled="form.BUSICHANNEL==''">
                <el-option v-for="item in typeOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                  :value="item.FIELDKEY"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="query">查询</el-button>
          </el-col>
          <el-col :md="3" :lg="2" class="searchBtnMarginTop">
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;width:100%;overflow:scroll;">
      <!-- <table id="table1">
        <tr>
          <th >多媒体类型</th>
          <th class="w200">受理渠道</th>
          <th class="w200">业务类型</th>
          <th class="w200">总进线量</th>
          <th class="w200">接通量</th>
          <th class="w200">接通率</th>
          <th class="w200">当前排队人数</th>
          <th class="w200">20秒服务水平</th>
          <th class="w200">平均振铃时长</th>
          <th class="w200">客户放弃率</th>
          <th class="w200">客户放弃时平均排队时长</th>
          <th class="w200">业务接通平均等待时间</th>
          <th class="w200">平均通话时长</th>
        </tr>
        <tr v-if="tableData.length == 0">
          <td colspan="14">
            暂无数据
          </td>
        </tr>
        <tr v-else="tableData.length>0" v-for="(item,i) in tableData" >
          <td >{{item.MEDIATYPE}}</td>
          <td colspan="13">
            <table class="table2">
              <tr v-for="(par, j) in item.CHANNEL">
                <td class="w200">{{par.BUSICHANNEL | formatChannel}}</td>
                <td >
                  <table class="table3" >
                    <tr v-for="val in par.TYPE">
                      <td class="w200">{{val.BUSITYPE | formatType}}</td>
                      <td class="w200">{{val.coilincount}}</td>
                      <td class="w200">{{val.answercount}}</td>
                      <td class="w200">{{val.answercount_coilincount}}</td>
                      <td class="w200">{{val.currlinecount}}</td>
                      <td class="w200">{{val.answer20count_coilincount}}</td>
                      <td class="w200">{{secondFormat(val.ringingdurn_ringingcount)}}</td>
                      <td class="w200">{{val.cancelcount_coilincount}}</td>
                      <td class="w200">{{secondFormat(val.cancelqueuedurn_cancelcount)}}</td>
                      <td class="w200">{{secondFormat(val.answerqueuedurn_answercount)}}</td>
                      <td class="w200">{{secondFormat(val.establisheddurn_answercount)}}</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table> -->
      <lb-table :column="tableData.column" align="center" :data="tableData.data" :merge="['MEDIATYPE','BUSICHANNEL','BUSITYPE']" border>
      </lb-table>
    </el-card>
    <!-- 弹窗 -->
    <!-- <keep-alive>
      <component :is="dialogList.taskConfig" :option="dialogOptions"  @refreshTable="query"></component>
    </keep-alive> -->
  </div>
</template>

<script>
  import query from "@/message/siteManagement/queueDetail/query";
  import requestYg from "@/common/utils/requestYg";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import toolBox from "@/common/utils/toolBox";
  import dataQuery from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'
  import request from "@/common/utils/requestWFM";
  import LbTable from '@/components/lb-table/lb-table'

  let that
  export default {
    components: {
      LbTable
    },
    data() {
      return {
         tableData:{
          column: [{
            prop: 'MEDIATYPE',
            label: '多媒体类型',
            width: '100',
          }, 
          {
            prop: 'BUSICHANNEL',
            label: '受理渠道',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.formatChannel(scope.row.BUSICHANNEL)}
                  </span>
                </div>
              )
            },
            width: '100',
          },
          {
            prop: 'BUSITYPE',
            label: '业务类型',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.formatType(scope.row.BUSITYPE)}
                  </span>
                </div>
              )
            },
            width:'100'
          },
          {
            prop: 'coilincount',
            label: '总进线量',
            width: '100'
          },
          {
            prop: 'answercount',
            label: '接通量',
            width: '100'
          },
          {
            prop: 'answer20count',
            label: '20秒接通量',
            width: '100',
          },
          {
            prop: 'answercount_coilincount',
            label: '接通率',
            width: '100',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.keepTwoDecimal(scope.row.answercount_coilincount* 100)+'%'}
                  </span>
                </div>
              )
            },
          },
          {
            prop: 'currlinecount',
            label: '当前排队人数',
            width: '110',
          },
          {
            prop: 'answer20count_coilincount',
            label: '20秒服务水平',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.keepTwoDecimal(scope.row.answer20count_coilincount* 100)+'%'}
                  </span>
                </div>
              )
            },
          },
          {
            prop: 'ringingdurn_ringingcount',
            label: '平均振铃时长',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.secondFormat(scope.row.ringingdurn_ringingcount)}
                  </span>
                </div>
              )
            },
          },
          {
            prop: 'cancelcount_coilincount',
            label: '客户放弃率',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.keepTwoDecimal(scope.row.cancelcount_coilincount* 100)+'%'}
                  </span>
                </div>
              )
            },
          },
          {
            prop: 'cancelqueuedurn_cancelcount',
            label: '客户放弃时平均排队时长',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.secondFormat(scope.row.cancelqueuedurn_cancelcount)}
                  </span>
                </div>
              )
            },
          },
          {
            prop: 'answerqueuedurn_answercount',
            label: '业务接通平均等待时间',
            width:'140',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.secondFormat(scope.row.answerqueuedurn_answercount)}
                  </span>
                </div>
              )
            },

          },
          {
            prop: 'establisheddurn_answercount',
            label: '平均通话总时长',
            width:'130',
            render: (h,scope) => {
              return (  
                <div>
                  <span>
                    {this.secondFormat(scope.row.establisheddurn_answercount)}
                  </span>
                </div>
              )
            },
          },


        ],
        data: []
        },
        channelOption: [],
        typeOption: [],
        mediaOption: [{
            value: 'video',
            label: '视频'
          },
          {
            value: 'voice',
            label: '电话'
          },
          {
            value: 'chat',
            label: '文字'
          },
        ],
        loading: false, //loading遮罩
        form: {
          MEDIATYPE: "video", //多媒体类型
          BUSICHANNEL: "", //受理渠道
          BUSITYPE: "", //业务类型
        },
      };
    },
    beforeCreate: function () {
      that = this;
    },
    filters:{
      
    },
    computed: {},
    created: function () {
      this.dictionaryQuery('BUSITYPE').then(value => this.typeOption = value)
      this.dictionaryQuery('BUSICHANNEL').then(value => this.channelOption = value)
      this.query()
    },
    watch: {},
    methods: {
      formatChannel(val){
        // console.log(that.dataOptions)
        let str = ''
        that.channelOption.forEach(item => {
          if (val == item.FIELDKEY) {
            str = item.FIELDVALUE
          }
        });
        return str
      },
      formatType(val){
        // console.log(that.dataOptions)
        let str = ''
        that.typeOption.forEach(item => {
          if (val == item.FIELDKEY) {
            str = item.FIELDVALUE
          }
        });
        return str
      },
      //保留两位小数（四舍五入）
    keepTwoDecimal(value){
      if (value == undefined) {
        return "";
      }
      return toolBox.keepTwoDecimal(value);
    },
      // 秒格式化
      secondFormat(value){
        return toolBox.formatSeconds(value)
      },
      // 更改业务渠道
      changeChannel(){
        this.form.BUSITYPE = ''
      },
      changeMedia(data) {
        this.form.BUSICHANNEL = ''
        this.form.BUSITYPE = ''
        // console.log(data)
        // this.channelQuery(data).then(value => this.channelOption = value)

      },
      // 重置查询条件
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      async dictionaryQuery(type) {
        let resBody = new dataQuery();
        resBody.data.FIELDCODE = type
        // resBody.data.FIELDNAME = this.form.name;
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 200
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          console.log('data1',response.BODY.FIEDATA)
          return response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      async channelQuery(media) {
        let resBody = new query();
        resBody.data.MEDIATYPE = this.form.MEDIATYPE
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          return response.RSP_BODY.CHANNEL
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      query() {
        this.loading = true;
        let resBody = new query();
        resBody.data.MEDIATYPE = this.form.MEDIATYPE
        resBody.data.BUSICHANNEL = this.form.BUSICHANNEL
        resBody.data.BUSITYPE = this.form.BUSITYPE
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              let data = response.RSP_BODY.Struct || [];
              let testData = []
              if (data.length > 0) {
                data.forEach(item => {
                  // testData.push({
                  //   'MEDIATYPE': item.MEDIATYPE,
                  // })
                  item.CHANNEL.forEach(el => {
                    el.TYPE.forEach(ele => {
                      testData.push({
                        'MEDIATYPE': item.MEDIATYPE,
                        'BUSICHANNEL':el.BUSICHANNEL,
                        'BUSITYPE':ele.BUSITYPE,
                        'coilincount':ele.coilincount,
                        'answercount':ele.answercount,
                        'answercount_coilincount':ele.answercount_coilincount,
                        'currlinecount':ele.currlinecount,
                        'answer20count_coilincount':ele.answer20count_coilincount,
                        'ringingdurn_ringingcount':ele.ringingdurn_ringingcount,
                        'cancelcount_coilincount':ele.cancelcount_coilincount,
                        'cancelqueuedurn_cancelcount':ele.cancelqueuedurn_cancelcount,
                        'answerqueuedurn_answercount':ele.answerqueuedurn_answercount,
                        'establisheddurn_answercount':ele.establisheddurn_answercount,
                        'answer20count':ele.answer20count          
                      })
                    })
                  })
                })
                this.tableData.data = testData
              }else{
                this.tableData.data  = []
              }
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          })
      },
    }
  };

</script>


<style lang="scss" scoped>
#table1{
  width: 1460px;
  table-layout:auto;
  overflow:scroll;
  color: #606266;
  // border: 1px solid #EBEEF5;
}
  table {
    color: #606266;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    // overflow: scroll;
    table-layout:fixed;
    
  }
  #table1 th{
    // white-space: nowrap;
    // overflow: hidden;
    // background: #f7f7f7;
    text-align: center;
    font-size: 15px;  
  }
  table th,
  td {
    padding:0;
    margin:0;
    border: 1px solid #EBEEF5;
    height: 30px;
    font-size: 14px; 
  }

  .table2 tr td:nth-child(1) {
    border-left: 0;
  }

  .table2 tr td:nth-last-child(1) {
    border-right: 0;
  }

  .table2 tr:nth-child(1) td {
    border-top: 0;
  }

  // .table2 tr:nth-last-child(1) td {
  //   border-bottom: 0;
  // }

  .w200 {
    width: 110px;
  }


  .selectTree {
    min-width: 150px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-form-item {
    margin-left: 30px;
  }

  .el-form-item1 {
    margin-left: 10px;
  }

  .box2-button {
    width: 80px;
  }

  .el-card {
    overflow: inherit;
  }

</style>
